<template>
  <el-container>
    <el-header>
      <h1>欢迎使用惊喜一餐！</h1>
    </el-header>

    <el-main>
      <el-row>
        <el-col :span="8" v-for="(restaurant, index) in recommendedRestaurants" :key="index">
          <el-card :body-style="{ padding: '20px' }">
            <router-link :to="{ name: 'restaurant', params: { id: restaurant.id } }">
              <img :src="restaurant.image" class="restaurant-img" />
            </router-link>
            <div class="restaurant-info">
              <h3>{{ restaurant.name }}</h3>
              <p>{{ restaurant.description }}</p>
              <p>评分: {{ restaurant.rating }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue';
import restaurantImage1 from '../assets/restaurant1.jpg';
import restaurantImage2 from '../assets/restaurant2.jpg';
import restaurantImage3 from '../assets/restaurant3.jpg';

const recommendedRestaurants = ref([
  { id: 1, name: '餐厅A', image: restaurantImage1, description: '美味的食物', rating: 4.5 },
  { id: 2, name: '餐厅B', image: restaurantImage2, description: '新鲜的食材', rating: 4.7 },
  { id: 3, name: '餐厅C', image: restaurantImage3, description: '优质的服务', rating: 4.8 },
]);
</script>

<style scoped>
.restaurant-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.restaurant-info {
  padding-top: 10px;
}
</style>
